<template>
  <view :id="id" class="curveChart"></view>
</template>
<script>
// import * as echarts from "../../static/plugins/js/echarts/echarts.js";
// import * as echarts from "../../static/plugins/js/echartsPlus/index.js";
import * as echarts from "../../static/plugins/js/echarts/index.js";

export default {
  props: {
    id: String,
    chartData: {
      type: Array,
      default: () => [],
    },
    dataMap: {
      type: Object,
      default: () => {
        return {
          x: "time",
          y: "count",
        };
      },
    },
    setting: {
      type: Object,
      default: () => {
        return {
          max: true, // 是否设置纵坐标最大值
          axisLabel: false, // 是否显示纵坐标的百分号
          smooth: false, // 曲线是否光滑
          legendData: [], // 图例文字
          area: false, // 是否绘制区域面积
          areaColor: [], // 颜色
        };
      },
    },
    // chartDataBar: {
    //   type: Array,
    //   default: () => [],
    // },
    // settingBar: {
    //   type: Object,
    //   default: () => {
    //     return {
    //       max: true, // 是否设置纵坐标最大值
    //       axisLabel: false, // 是否显示纵坐标的百分号
    //       smooth: false, // 曲线是否光滑
    //       legendData: [], // 图例文字
    //       area: false, // 是否绘制区域面积
    //       areaColor: [], // 颜色
    //     };
    //   },
    // },
    // hasSwitch: {
    //   type: Boolean,
    //   default: false,
    // },
    isSwitch: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      myChart: null,
      option: {
        // backgroundColor: "#000",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // animation: false,
          },
        },
        legend: {
          show: false,
          type: "scroll",
          // left: 10,
          data: [],
          textStyle: {
            // color: "#fff",
            color: "#000",
          },
        },
        axisPointer: {
          link: [
            {
              xAxisIndex: "all",
            },
          ],
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            onZero: true,
          },
          data: [],
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#6e7079",
              width: 1,
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#6e7079",
              width: 1,
            },
          },
          nameTextStyle: {
            color: "#6e7079",
            fontSize: 13,
            // padding: this.setting?.nameTextStyle?.padding || 0,
            // lineHeight: 15,
          },
        },
        dataZoom: {
          type: "inside",
          show: true,
          realtime: true,
          start: 0,
          end: 50,
          zoomOnMouseWheel: true,
          moveOnMouseMove: true,
          moveOnMouseWheel: true,
        },
      },
      gridFirst: {
        height: 30,
        top: 50,
        right: 80,
        bottom: 50,
        left: 100,
        containLabel: false,
      },
      gridObj: {
        height: 200,
        top: 50,
        right: 80,
        bottom: 50,
        left: 100,
      },
      gridSwitch: {
        height: 35, // 400
        top: 12, // 50
        right: 50,
        bottom: "5%",
        left: 100,
        containLabel: false,
      },
    };
  },
  watch: {
    chartData: {
      handler(val) {
        console.log(val, "新值");
        this.ininChart();
      },
      deep: true,
    },
  },
  mounted() {
    // this.ininChart();
  },
  methods: {
    ininChart() {
      let data = this.chartData;
      console.log(data, "data");
      let legendData = this.setting?.legendData || [];
      let timeData = [],
        gridData = [],
        xAxisData = [],
        yAxisData = [],
        seriesData = [],
        dataZooms = [],
        indexArr = [],
        legendArr = [];
      let titleData = [];
      let unit = "";
      let seriesName = "";
      let title = "";
      let paddingVal = [0, 0, 0, 100];
      data.forEach((dataItem, dataIndex) => {
        // let titleTop = 0;
        let seriesObj = {
          type: "line",
          name: legendData[dataIndex],
          xAxisIndex: dataIndex,
          yAxisIndex: dataIndex,
        };
        if (this.setting?.nameTextStyle?.padding) {
          this.setting.nameTextStyle.padding.forEach((item) => {
            if (Array.isArray(item)) {
              paddingVal = this.setting.nameTextStyle.padding[dataIndex];
            } else {
              paddingVal = this.setting.nameTextStyle.padding;
            }
          });
        }
        if (dataItem && Array.isArray(dataItem)) {
          if (!Array.isArray(dataItem)) {
            dataItem = [dataItem];
          }
          timeData = dataItem.map((item) => item.time);
          let isArrayItem = false;
          let lineColor = [];
          dataItem.map((item, index) => {
            if (!Array.isArray(item)) {
              isArrayItem = false;
              unit = item.unit || "";
              title = item.title || "";
              seriesName = legendData[dataIndex] || "";
            } else {
              isArrayItem = true;
              seriesName =
                (legendData[dataIndex] && legendData[dataIndex][index]) || "";
              unit = item[0]?.unit || "";
              title = item[0].title || "";
              // 是否有开关量
              if (this.hasSwitch) {
                seriesData = [];
              } else {
                lineColor =
                  item[0]?.cjxType &&
                  this.setting?.areaColor &&
                  this.setting?.areaColor[item[0]?.cjxType];
                seriesData.push({
                  ...seriesObj,
                  symbolSize: this.setting.symbolSize,
                  data: item.map((i) => {
                    return i[this.dataMap.y];
                  }),
                  lineStyle: {
                    // color:
                    //   (item[0]?.cjxType &&
                    //     this.setting?.areaColor &&
                    //     this.setting?.areaColor[item[0]?.cjxType]) ||
                    //   "green",
                    color: lineColor || "green",
                  },
                  name: seriesName,
                  itemStyle: {
                    color: lineColor || "green",
                  },
                  sampling: this.setting.sampling || "",
                });
              }
            }
          });
          if (!isArrayItem) {
            lineColor = "green";
            seriesData.push({
              ...seriesObj,
              symbolSize: this.setting.symbolSize, // 圆点
              data: dataItem.map((i) => {
                return i[this.dataMap.y];
              }),
              lineStyle: {
                color: lineColor,
              },
              name: seriesName,
              itemStyle: {
                color: lineColor,
              },
              sampling: this.setting.sampling || "",
            });
          } else {
            timeData = dataItem[0].map((itemFinal) => itemFinal.time);
          }
          indexArr.push(dataIndex);
          // 是否有开关量
          if (
            (this.hasSwitch && dataIndex > this.chartDataBar.length - 1) ||
            !this.hasSwitch
          ) {
            let topVal = 0;
            let topFirst = 0;
            // 是否是道岔
            if (this.isSwitch) {
              topVal =
                this.gridSwitch.top +
                (this.gridSwitch.height + this.gridSwitch.top) * dataIndex;
              gridData.push({
                ...this.gridSwitch,
                height: this.gridSwitch.height + "%",
                top: topVal + "%",
                topVal: topVal,
              });
              // titleTop = topVal;
            } else {
              // 是否有开关量
              if (this.hasSwitch) {
                topFirst =
                  (this.gridFirst.height + this.gridFirst.top) *
                    this.chartDataBar.length +
                  this.gridObj.top;
                topVal =
                  topFirst +
                  (this.gridObj.height + this.gridObj.top) *
                    (dataIndex - this.chartDataBar.length);
              } else {
                topVal =
                  this.gridObj.top +
                  (this.gridObj.height + this.gridObj.top) * dataIndex;
              }
              gridData.push({
                ...this.gridObj,
                top: topVal,
              });
            }
            dataZooms.push({
              ...this.option.dataZoom,
              type: "inside",
              xAxisIndex: indexArr,
              start: 0,
              end: this.setting.dataZoomEnd,
              zoomOnMouseWheel: true,
              moveOnMouseMove: true,
              moveOnMouseWheel: true,
            });
            xAxisData.push({
              ...this.option.xAxis,
              data: timeData,
              gridIndex: dataIndex,
              axisLabel: {
                interval: this.setting.labelInterVal || "auto",
              },
            });
            // let name = this.setting.yName
            //   ? (Array.isArray(this.setting.yName) &&
            //       this.setting.yName[dataIndex]) ||
            //     this.setting.yName
            //   : "";
            yAxisData.push({
              ...this.option.yAxis,
              gridIndex: dataIndex,
              name: this.setting.yNameShow ? legendData[dataIndex] : "",
              // name: name
              //   ? name + " " + legendData[dataIndex]
              //   : legendData[dataIndex],
              nameTextStyle: {
                color: "#6e7079",
                fontSize: 13,
                padding: paddingVal,
                // padding: this.setting?.nameTextStyle?.padding || 0,
                // lineHeight: 15,
              },
              axisLabel: {
                formatter: "{value}" + unit,
              },
            });
          }
        }
        let legendList = [];
        this.setting?.legendData?.forEach((item) => {
          if (Array.isArray(item)) {
            legendList = this.setting.legendData[dataIndex];
          } else {
            legendList = this.setting.legendData;
          }
        });
        legendArr.push({
          ...this.option.legend,
          show: this.setting.legendShow ? true : false,
          icon: "rect",
          lineStyle: {
            with: 10,
          },
          data: legendList,
          top: Number(gridData[dataIndex]?.topVal) - 5 + "%",
          left: this.gridSwitch.left,
        });
        titleData.push({
          show: title ? true : false,
          text: title,
          left: "center",
          textStyle: {
            fontSize: 13,
            // color: "#fff",
            color: "#000",
          },
          top: Number(gridData[dataIndex]?.topVal) - 8 + "%",
        });
      });
      // if (this.hasSwitch) {
      //   let returnData = null;
      //   returnData = this.handleDataLine(
      //     data,
      //     timeData,
      //     this.settingBar.legendData
      //   );
      //   console.log(returnData, "returnData");
      //   // this.handleDataBar(data, timeData);
      //   if (returnData) {
      //     xAxisData = returnData.xAxisData?.concat(xAxisData) || xAxisData;
      //     yAxisData = returnData.yAxisData?.concat(yAxisData) || yAxisData;
      //     seriesData = returnData.seriesData?.concat(seriesData) || seriesData;
      //     // gridData = returnData.gridData || gridData;
      //     gridData = returnData.gridData?.concat(gridData) || gridData;
      //     dataZooms = returnData.dataZooms?.concat(dataZooms) || dataZooms;
      //   }
      // }
      let option = {
        ...this.option,
        title: titleData,
        legend: legendArr,
        grid: gridData,
        dataZoom: dataZooms,
        xAxis: xAxisData,
        yAxis: yAxisData,
        series: seriesData,
      };
      console.log(option, "option");
      // 是否是道岔
      let seriesLen = option?.series?.length || 0;
      let index = (seriesLen && option.series[seriesLen - 1]?.xAxisIndex) || 0;
      let height = "100%";
      if (!this.isSwitch) {
        height =
          gridData[gridData.length - 1].top + this.gridObj.height + 100 + "px";
      } else {
        // height =
        //   (this.gridSwitch.height + this.gridSwitch.top) * gridData.length +
        //   5 +
        //   "%";
      }
      let doc = document.getElementById(this.id);
      doc.style.height = height;
      console.log(seriesLen, index, height, doc.style.height, "height");
      this.myChart = echarts.init(document.getElementById(this.id)); // "curveChart"
      this.myChart.setOption(option, true, true);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="less">
.curveChart {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow-y: auto;
  // background: #aaa;
}
</style>
